<template>
  <el-config-provider :locale="locale" :size="size">
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import { useAppStore } from "@/store";
import { SizeEnum } from "@/enums/SizeEnum";

const appStore = useAppStore();

const locale = computed(() => appStore.locale);
const size = computed(() => appStore.size as SizeEnum);
const userLang: string = navigator.language || (navigator as any).userLanguage;
const labelWidth = userLang.indexOf("en") >= 0 ? "150px" : "100px";
const styleTag = document.createElement("style");
styleTag.innerHTML = `
  .el-dialog .el-form-item__label, .el-drawer .el-form-item__label {
    width: ${labelWidth};
    text-align: right;
  }
`;
document.head.appendChild(styleTag);
</script>
